What?

Supersedes #56005

This PR tweaks the vertical alignment of the menu toggle for the DropdownMenu component

Why?

These changes prevent some unwanted vertical space from being added under the dropdown menu toggle, as initially flagged in #56002 (comment)

How?

DropdownMenu internally uses the Dropdown component. Since we established that it would be risky to tweak the display property of the Dropdown wrapper element, we opted for removing the unwanted vertical space by setting the vertical-align CSS property in the DropdownMenu component.

As also noted elsewhere, this PR will only remove such vertical space on the DropdownMenu component. Consumers of Dropdown will have to provide a similar "fix" directly when using the component.

Testing Instructions

• Checkout trunk
• Apply this patch:

diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx
index d4b856380d..f36d3194db 100644
--- a/packages/components/src/dropdown-menu/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu/stories/index.story.tsx
@@ -67,6 +67,9 @@ Default.args = {
 			onClick: () => console.log( 'down!' ),
 		},
 	],
+	toggleProps: {
+		size: 'small',
+	},
 };
 
 export const WithChildren = Template.bind( {} );

• Visit the DropdownMenu storybook example. Inspect the dropdown menu's toggle, and notice how, while the button element is 24px tall, the surrounding div (with classname .components-dropdown-menu) has a height of 27px.
• Apply the changes from this PR
• Reload the same Storybook example. The div wrapping the toggle should now have the same height as the toggle (24px)